# INTERTEMPORAL_CHOICE_front

## Название
Межвременной выбор

## Описание

- Потребитель живет в 2 периода: 1 и 2
- (m1, m2) - его доход в первом и втором периодах
- (c1, с2) - его расходы на потребление в первом и втором периодах
- Имеется возможность занимать деньги или сберегать их, под одну и ту ж ставку процента r

Если c1 < m1 (т.е. потребитель сберегает часть своего текущего дохода), то он является кредитором:
с2 = m2 + (m1 - c1) + r(m1 - c1) = m2 + (1 + r)(m1 - c1)                   (1)

Если с1 > m1 (т.е. потребитель занимает в счет своего будущего дохода), то он является заемщиком:

с2 = m2 - (с1 - m1) - r(c1 - m1) = m2 - (1 + r)(c1 - m1)                     (2)

(1) и (2) сводятся к следующему уравнению:

c1(1 + r) + c2 = m1(1 + r) + m2 - это уравнение бюджетной линии, записанное через будущую стоимость денег (каждый рубль, полученный или потраченный сейчас, был бы эквивалентен “1 + r” рублям в будущем)

c1 + c2 / (1 + r) = m1 + m2 / (1 + r) - это уравнение бюджетной линии, записанное через текущую стоимость денег (каждый рубль, полученный или потраченный в будущем, был бы эквивалентен “1 / (1 + r)” рублям сейчас)

Перед учеником стоит задача максимизации полезности. Предполагается, что предпочтения потребителя на множестве наборов вида (c1, c2) стандартны (т.е. рациональны, непрерывны, монотонны и строго выпуклы)

То, будет ли человек в итоге кредитором или заемщиком, зависит от решения задачи максимизации его полезности с учетом уравнения бюджетной линии, записанное через будущую стоимость денег

Данный проект представляет собой front-end приложение для графического и математического представления данной модели
Пользователь при первом заходе на страницу сайта вбивает значения m1, m2, r. В зависимости от введенных данных появляется график с бюджетной линией и полезностью, правее записана система, которую необходимо решить, шаги решения и ответ. После того, как график был построен в первый раз, для каждой переменной появляется "движок", с помощью которого можно менять значения (m1, m2 - от 0 до 450 000, r - от 0 до 100). Также на странице представлено объяснение, почему при данных значениях параметров статус агента (кредитор или заемщик) именно такой. Внизу страницы присутствует анимация, которая меняется в зависимости от обновления какого-либо параметра: если статус потребителя изменился с кредитора на заемщика, то чемодан с деньгами двигается от банка к человеку, если с заемщика на кредитора - чемодан двигается от человека к банку, если статус не меняется, то чемодан подпрыгивает на месте
На второй странице начинается игра с 10 турами, очки за каждый раунд плюсуются, можно получить от 0 до 20 баллов по итогу игры. В каждом туре случайно выбирается вопрос из большого списка. Указаны приблизительные значения доходов и ставки процента (маленькие, средние или бошльшие), а дальше следует 2 вопроса: какой статус в данный момент у агента (кредитор или заемщик) и может ли измениться его статус при изменении одного из параметров. Необходимо выбрать по одному ответу на каждый из двух вопросов. После прохождения игры виден суммарный балл и оценка уровня владения данной темой 

## Стек технологий
* JavaScript
* HTML
* CSS
* Visual Studio Code
* Figma

## Структура приложения
Приложение состоит из двух веб-страниц. На первой странице будет 2 блока: страница 1 - описание модели, ввод параметров, построение модели, страница 2 - игра. На первой странице сначала спрятано построение модели, пользователь видит только описание и поляя для ввода. После нажатия на кнопку "Начать" данная часть скрывается, а на этой же странице становится видно представление графика с бюджетной линией и касающейся ее полезностью, информация о том, является ли потребитель заемщиком или кредитором, система из максимизации полезности и уравнения бюджетной линии, записанного через будущую стоимость денег, решение этой системы. Внизу страницы анимация с движущимся чемоданом денег. На второй странице пользователь играет в игру, где задается вопрос и необходимо нажать на 2 из 4 клавиш с вариантами ответов.

## Информационные элементы и элементы управления (web-версия)
Первая страница:
|Название|Тип|Описание|
|---|---|---|
|Вводная информация| Текст | Общая информация о модели межвременного выбора и о структуре сайта|
|m1| Строка ввода (число)| Доход в первом периоде|
|m2| Строка ввода (число)| Доход во втором периоде|
|r| Строка ввода (число)| Ставка процента|
|Start| Кнопка | Начинает графическое и математическое предстсавление модели с заданными параметрами|
|График| Холст | График с изображением бюджетной линии и полезностью|
|m1_moving| Полузнок | Изменяемый доход в первом периоде|
|m2_moving| Полузнок | Изменяемый доход во втором периоде|
|r_moving| Полузнок | Изменяемая ставка процента|
|Решение| Текст | Система, которую нужно решить, шаги решения, ответ|
|Объяснение| Текст | Описание, почему в данный момент статус именно такой|
|Анимация| Холст | Изображение человека, банка и движущегося между ними чемодана с деньами|
|Начать игру| Кнопка | Переходит на следующую страницу и начинает игру|

Вторая страница:
|Название|Тип|Описание|
|---|---|---|
|Вопрос| Текст | Вопрос, на который отвечает пользователь в данном раунде |
|Scores| Текст | Количество очков, которые набрал пользователь к данному раунду|
|Варианты ответов| Кнопка | Два из вариантов ответов - верные для данных вопросов, дриугие - неверные|


## Архитектура приложения

Файл **intertemporaral_choice.js**
Реализация класса Math_model


Файл **model_in_browser.js**
Реализация класса Model_in_browser

Файл **game_last_page.js**
Реализация класса Game

Файл **index.html**
Реализация элементов управления и информационных элементов первой страницы

Файл **index2.html**
Реализация элементов управления и информационных элементов второй страницы

Файл **styles1.css**
Графические характеристики первого блока на первой странице (вводная информация, ввод параметров)

Файл **styles2.css**
Графические характеристики второго блока на первой странице (построение модели, график, решение, анимация)

Файл **styles3.css**
Графические характеристики второй страницы (игра)

## База данных
Приложение не использует базу данных.

## Логика работы (web-версия)
Пользователь открывает страницу. Читает описание модели, что будет дальше на сайте, чему сможет научиться. Внизу страницы он вводит значения доходов в первом и втором периодах и ставку процента. Нажимает на клавишу "Начать". Перед пользователем новая страница - построенный график по параметрам, решение, анимация. Если пользователь захочет изменить параметры и перестроить модель, то он может сделать это с помощью ползунков, после изменения которых начинают соответственно менять все элементы: график перерисовывается, решение для новых чисел, анимация начинает двигаться
Далее пользователь может перейти к игре, для этого нажимает на кнопку "Начать игру". Перед ним появляется поле с вопросами и 4 кнопки, на 2 из которых надо нажать (по одной верной для каждого вопроса). После выбора 2 кнопок ученик нажимает на кнопку "Проверить", в зависимости от правильности ответа цвета меняются, пользователь больше не может изменить ответ, только перейти к следующему вопросу при нажатии на стрелку. Таким образом он отвечает на 10 вопрос, после чего в зависимости от набранных очков высвечивается сообщение о текущем уровне владения материала. Игра заканчивается

## Макет
Макеты для изначальных вариантов страниц [Figma](https://www.figma.com/proto/5LpCZDvEyAaXgHNYvCv6p3/Untitled?node-id=169%3A3&t=L4S22kMSDsW3ylRW-1)

## Web - страница
https://arishandrina.github.io/INTERTEMPORAL_CHOICE_front/
